<template>
    <layout>
    	<mt-header title="添加监护人">
    	 <mt-button slot="left" icon="back"></mt-button>
  			<mt-button slot="right"></mt-button>
		</mt-header>
			<div class="name fist_ch">
				<div class="left"> <i class="icon-shouji"></i> </div>
				<div class="right"><input type="text" v-model="fist" placeholder="对方手机号" /></div>
			</div>
			<div class="name">
				<div class="left"><i class="icon-shouji"></i> </div>
				<div class="right"><input type="text" v-model="fists" placeholder="确认手机号" /></div>
			</div>

        <mt-checklist
                title="用户关系"
                v-model="value"
                :options="relationshipList">
            </mt-checklist>
        <div class="selet">
            <div class="left"><i class="icon-11guanxi"></i></div>
            <div class="right">
                <select v-model='relationship' @change='' class='form-control'>
                    <template v-for="item in relationshipList">
                        <option :value='item.value'>{{ item.label }}</option>
                    </template>
                </select>
            </div>
        </div>
			<div class="selet">
				<div class="left"><i class="icon-11guanxi"></i></div>
				<div class="right">
					<div class="right_l">{{mession}}</div>
					<div class="right_r" v-show="isnode" @click="none()"> <i class="icon-11guanxi"></i>  </div>
					<div class="right_rs" v-show="isfalse" @click="none()"><i class="icon-up"></i></div>
				</div>
			</div>
			<ul v-show="isShow"><li v-for="(data, index) in list" :key="index" @click="show(data.name,index)">{{data.name}}</li></ul>
			<div class="footer" @click="alter">确认添加</div>
    </layout>
</template>
<style lang="scss">
    @import "index.scss";
</style>
<script type="text/babel">
    import { api } from 'framework/config.js';
    import Layout from "component/layout/standard";

    import Vue from 'vue'
    import Mint from 'mint-ui';
    Vue.use(Mint);

    export default {
        components: {
            Layout
        },
        data(){
            return {
                value: [1],
                relationshipList: [
                    {
                        value: 1,
                        label: '我是爸爸',
                    },
                    {
                        value: 2,
                        label: '我是妈妈',
                    },
                    {
                        value: 3,
                        label: '我是爷爷',
                    },
                    {
                        value: 4,
                        label: '我是奶奶',
                    },
                    {
                        value: 5,
                        label: '我是外公',
                    },
                    {
                        value: 6,
                        label: '我是外婆',
                    },
                    {
                        value: 7,
                        label: '我是大爷',
                    },
                    {
                        value: 8,
                        label: '我是二爷',
                    },
                    {
                        value: 9,
                        label: '他是我爸爸',
                    },
                    {
                        value: -1,
                        label: '其他',
                    }
                ],


				mession: "关系",
				money: "月收入",
				isShow: false,
				isnode: true,
				isfalse: false,

				list: [{
						name: "我是爸爸"
					}, {
						name: "我是妈妈"

					}, {
						name: "我是外公"

					}, {
						name: "我是奶奶"
					}, {
						name: "其他"

					}

				],
				fist:"1351196006",
				fists:"135119600",
                relationship: 1
            }
        },
        computed: {
            api(){
                return api();
            }
        },
        methods: {

			none: function() {
				this.isnode = !this.isnode
				this.isShow = !this.isShow
				this.isfalse = !this.isfalse
			},
			show: function(data, index) {
				this.mession = data
				this.isShow = !this.isShow
				this.isnode = !this.isnode
				this.isfalse = !this.isfalse
			},


			alter:function() {
				if(this.fist == this.fists){
					console.log(this.fist)
					console.log(this.fists)
				}else{
					console.log("bug")
					alert("号码不一样")
				}
			},
            edit(){
                Mint.Indicator.open();
                this.$http.get('/api/guardian/edit', {
                    params: {
                        id
                    }
                }).then((response) => {
                    Mint.Indicator.close();
                    if (response.status == 200){
                        let data = response.data;
                        if (data.code == 200) {
                            Mint.Toast('成功');
                        }else{
                            Mint.Toast('失败');
                        }
                    }else{
                        Mint.Toast('失败');
                    }
                });
            }


        },
        created(){
        },
        mounted() {
        }
    }
</script>

